<template>
  <div class="register-container">
    <!-- 左边栏 -->
    <div style="grid-column: span 3;">
        <div class="left-container">
            <div class="animate__animated">
                <h2 class="left-container-title">语音辅助后台管理系统</h2>
                <p class="left-container-introduce">一款由 Spring Boot3 + Mybaits + Vue 3.0 + Vite 4 开发的前后端分离系统</p>
                <img src="@/assets/images/login-logo.png" alt="logo" class="left-container-image">
            </div>
        </div>
    </div>



    <!-- 右边栏 -->
    <div class="right-container">
      <h2 class="right-container-register">注 册</h2>
      <el-form :model="user" :rules="rules" ref="userForm"style="margin-top:1.25rem;">
        <el-form-item prop="username">
          <el-input

            placeholder="请输入账号"
            size="large"
            prefix-icon="el-icon-user"
            v-model="user.username"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            size="large"
            prefix-icon="el-icon-lock"
            show-password
            v-model="user.password"

          />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            placeholder="请确认密码"
            size="large"
            prefix-icon="el-icon-lock"
            show-password
            v-model="user.confirmPassword"
          />
        </el-form-item>
        <div class="register-buttons">
          <el-button round type="primary" size="large" @click="registerHome" class="elButtonR">注册</el-button>
          <el-button round type="warning" size="large" @click="goToLogin" class="elButtonL">返回登录</el-button>
        </div>
      </el-form>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { register } from '@/api/login';

const router = useRouter();

// 表单数据
const user = ref({
  username: '',
  password: '',
  confirmPassword: '',
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
  ],
};

// 注册逻辑
const userForm = ref(null); // 获取表单引用


const registerHome = async () => {
    try{
        if (user.value.password !== user.value.confirmPassword) {
            ElMessage.error('两次输入的密码不一致');
            return;
        }

        const requestData = {
            username: user.value.username,
            password: user.value.password,
        };
        
        const response = await register(requestData);
        console.log(response);

        if (response.data.code == 200) {
            ElMessage.success('注册成功');
            router.push('/login');
        } else {
            ElMessage.error(response.data.msg);
        }
    }catch(error){
        console.error('注册失败:', error);
        ElMessage.error('注册失败，请稍后重试');
    }
}

// 跳转到登录页
const goToLogin = () => {

  router.push('/login');
};
</script>

<style scoped>
.register-container {
  display: grid;
  grid-template-columns:  repeat(6, minmax(0, 1fr));
  height: 100vh;
  background-color: white;
}

.left-container {
  height: 100%;
  background: #001428;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.animate__animated{
  animation-name: bounceInLeft;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-delay: 0.5s;
}

.left-container-title{
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 1.75rem;
  color:white;
  text-align: center;
}

.left-container-introduce{
  color:white;
}

.left-container-image{
  height:450px;
}


.right-container {
  grid-column: span 3 ;
  padding-left:0.75rem;
  padding-right:0.75rem;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* 根据具体动画库的类名添加动画效果 */
  animation-name: bounceInRight;
  animation-duration: 0.3s;
}

.right-container-register {
  font-weight:bold;
  font-size:1.875rem;
  color:#374151;
  margin-top:1.25rem;
}

.elButtonR{
  width:130px;
  margin-top:1rem;
  margin-right:3opx;
}

.elButtonL{
  width:130px;
  margin-top:1rem;
}
</style>